<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>自助售货管理后台</title>
    <script src="./date/js/Dream.js"></script>
    <script src="./app-assets/js/Http.js"></script>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
    <link href="./date/css/layui.css" rel="stylesheet">
    <style>
    .layui-menu {
        position: fixed;
        top: 16px;
        left: 16px;
        width: 260px;
        z-index: 1000;
        max-height: calc(100vh - 32px); /* 防止内容溢出 */
        overflow-y: auto; /* 添加垂直滚动条 */
      }

    .center-content {
        display: flex;
        justify-content: center;
        align-items: center;
        /* height: 100vh; 使容器高度占满整个视口 */
    }

    .search-container {
        display: flex;
        align-items: center;
    }

    .search-container h3 {
        margin-right: 15px;
    }
    </style>
</head>
<body>
<div class="content-wrapper">
  <div class="content-header center-content">
    <div class="search-container">
        <h3 class="content-header-title mb-0">采购商品</h3>
        <div class="input-group" style="width: 300px;"> 
            <input type="text" class="form-control" placeholder="搜索商品">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" id="productNameSearch">搜索</button>
            </div><br>
            <div class="layui-menu-body-title">
              <a href="javascript:;" class="supplier-link" id="showAll">展示全部</a>
            </div>
        </div>
    </div>
  </div>
</div>  
<div class="content-wrapper">
    <div class="row">
          <div class="layui-panel" style="width: 260px; margin: 16px;">
            <ul class="layui-menu" id="demo-menu">
              
            </ul>
          </div>
          
          <div class="layui-bg-gray" style="padding: 16px;">
            <div class="layui-row layui-col-space15" id="showShangpMessage">
              
            </div>
          </div>
          <script src="./date/js/layui.js"></script>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>

</body>
</html>
<script>

  $('#showAll').on('click',function(){
    selectAll("","",1);
  })
$(function(){
  selectAll("","",1);
})
    function selectAll(productName,supplierName, pageNum) {
        $.ajax({
            'url': HTTP.getUserInfo+'/products',
            'type': 'get',
            'dataType': 'json',
            'data': {productName,supplierName,pageNum},
            'success': function(data){
              $('#demo-menu').empty();
              $('#showShangpMessage').empty();
              var dataMessage = data.data.list;
              dataMessage.forEach(function(item){
                var str = `
                  <div class="layui-col-md6">
                    <div class="layui-card">
                      <div class="layui-card-body">
                        <img src="./image/2.jpg" style="width: 300px;height: 200px;"><br>
                          商品名称:<span>`+item.productName+`</span>&nbsp;&nbsp;&nbsp;商品采购价:<span>`+item.purchasePrice+`</span><br>建议商品售价:`+item.price+`<br>
                        <button class="layui-btn layui-btn-normal">加入购物车</button>
                      </div>
                    </div>
                  </div>
                `;
                $('#showShangpMessage').append(str);
              })
              selectAllSuppliers()
            }
        })
    }
    function selectAllSuppliers() {
    $.ajax({
      'url': 'http://localhost:24080/Shopping749/suppliers/list',
      'type': 'get',
      'dataType': 'json',
      success: function (data) {
        $('#demo-menu').empty();
        var dataMessage = data.data;
        dataMessage.forEach(function (item) {
          var str = `
            <li lay-options="{id: 100}">
              <div class="layui-menu-body-title">
                <a href="javascript:;" class="supplier-link" data-supplier-name="` + item.supplierName + `">` + item.supplierName + `</a>
              </div>
            </li>
          `;
          $('#demo-menu').append(str);
        });
      }
    });
  }
  var supplierNameAll = "";
  var productNameAll = "";
  layui.use(['dropdown', 'layer', 'util'], function () {
    var dropdown = layui.dropdown;
    var layer = layui.layer;
    var util = layui.util;

    // 菜单点击事件
    $(document).on('click', '.supplier-link', function () {
      var supplierName = $(this).data('supplier-name');
      layer.msg(supplierName);
      supplierNameAll = supplierName;
      selectAll(productNameAll,supplierNameAll,1);
    });
    // 初始化加载供应商列表
    selectAllSuppliers();
  });

  $('#productNameSearch').on('click',function(){
    var productName = $('.search-container input').val();
    productNameAll = productName;
    selectAll(productNameAll,supplierNameAll,1)
  })
</script>

<script>
  //鼠标滑轮监控
    let pageNum=1;
    $(document).on("mousewheel DOMMouseScroll", function (event) {
    
    var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));              // firefox

    // if (delta > 0) {
    // // 向上滚
    //  console.log("up+++++");
    // //do somthing
    // }  
      if (delta < 0) {
        // 向下滚
        console.log("down+++++");
        pageNum+=1;
        if(pageNum<=5){
          console.log("获取后台第"+pageNum+"数据");
        }else{
          console.log("已是最后一页");
        }
      //do somthing
      }
    });

</script>